<template>
    <div class="contioner">
        <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
            <a-form size="small" :model="query" layout="inline">
                <a-form-item label="保养人" prop="beginDate">
                    <a-input v-model="query.beginDate" :style="{ width: '180px' }" class="bacClass" />
                </a-form-item>
            </a-form>
            <div class="my-tool-bar" style="margin-bottom: 5px">
                <a-space>
                    <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
                </a-space>
            </div>
        </div>
        <div class="my-divisders">
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
        </div>

        <div style="background-color: #f0f2f5; height: 10px"></div>
        <div :style="{ height: '90.5%', padding: '10px', }">
            <AgGridVuesCopys :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                @grid-ready="gridReady" style="height:calc(100% - 45px)" :defaultColDef="defaultColDef"
                class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc" :localeText="localeText1"
                @columnResized="onColumnResized" @columnMoved="onColumnMoved">
            </AgGridVuesCopys>
            <paginationCopys :page-size-options="pagingList1" :total="fySelet.total" show-total show-jumper show-page-size
                @change="PageSize" @page-size-change="change" 
                :page-size="fySelet.size" :current="fySelet.page" />
        </div>
    </div>
</template>
    
<script lang="ts" setup>


import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
// 引入element提示
//引入封装post
import { post } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { pagingList } from '@/api/paging'
import { localeText } from '@/api/aggridZw'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

const pagingList1: any = ref(pagingList)
const headerShow = ref<boolean>(true)


interface Querin {
    beginDate: any
    pageLoading: boolean
}
//getlist初始化接口参数
let query = reactive<Querin>({
    beginDate: '',
    pageLoading: false,
})

const fySelet: any = reactive({
    total: 10,
    size: 10,
    page: 1,
})

const PageSize = (val: any) => {
    fySelet.page = val
    selectJt()
}

const change = (val: any) => {
    fySelet.size = val
    selectJt()
}

onMounted(() => {
    selectJt()
})

const tableDataList: any = ref([])
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
}

const tc = [
    {
        headerName: '保养人',
        field: 'staff',
        width: 150
    },
    {
        headerName: '保养模板',
        field: 'maintainName',
        width: 150
    },
    {
        headerName: '机台',
        field: 'machine',
        width: 150
    },
    {
        headerName: '设备编号',
        field: 'machineCode',//
        width: 150
    },
    {
        headerName: '机台类型',
        field: 'machineType',//
        width: 150
    },
    {
        headerName: '保养开始时间',
        field: 'startMaintainTime',//
        width: 150
    },
    {
        headerName: '保养结束时间',
        field: 'endMaintainTime',//
        width: 150
    },
    {
        headerName: '保养时间',
        field: 'timeType',
        width: 150
    },
    {
        headerName: '回馈说明',
        field: 'illustrate',
        width: 150
    },
    {
        headerName: '备注',
        field: 'remark',
        width: 150
    },
]


function selectJt() {
    query.pageLoading = true
    updateGridState01()
    post({
        url: 'temRepair/maintainDocument/recordMaintainDocument',
        data: {
            staff: query.beginDate,
            page: fySelet.page,
            limit: fySelet.size,
        }
    }).then((res: any) => {
        if (res.code == 200) {
            tableDataList.value = res.data.list
            fySelet.total = res.data.total
        } else {
            Message.error(res.message)
        }
    }).catch(console.log).finally(() => {
        query.pageLoading = false
    })
}


const getList = () => {
    selectJt()
}

const localeText1: any = ref(localeText)
const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('MaintenanceRecord2', gridOption, colState, tc)
const onColumnMoved = () => {
    saveGridState01()
}
const onColumnResized = () => {
    saveGridState01()
}
</script>
<style scoped>
.contioner {
    height: 100%;
    background: #fff;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>
      